<!--
 * @Date: 2022-03-15 10:28:35
 * @Author: 陶子
 * @LastEditTime: 2022-07-19 17:45:40
 * @FilePath: \jk_one-stop_pc\src\views\warehouseManagement\stockTask\outStock\WaiteOutStock.vue
 * @pageName: 这是--(待出库列表)--页面
-->
<template>
  <div>
    <div class="topBox">
      <div>
        <a-button @click="handleShowFilter" icon="filter" style="margin-right: 10px">
          筛选 <span style="color: #1890ff; margin-left: 5px">{{ realFilterNum }}</span></a-button
        >
        <a-button @click="showColumn" icon="unordered-list" style="margin-right: 10px"> 设置列 </a-button>
      </div>
    </div>
    <a-table
      :key="tableKey"
      row-key="id"
      class="components-table-demo-nested"
      :columns="columns"
      :data-source="tableData"
      :pagination="false"
      :scroll="{ x: computedX, y: 'calc(100vh - 430px)' }"
      :components="drag(columns, 'WAITE_OUTSTOCK_LIST')"
      @expand="handleTableExpand"
      :loading="tableLoading"
    >
      <!-- 输入框搜索 -->
      <div slot="searchDropdown" slot-scope="{ confirm, clearFilters, column }" class="searchWorkOreder">
        <a-input
          :placeholder="checkPlaceholder(column.dataIndex)"
          v-model="tableFilterForm[column.dataIndex]"
          style="width: 188px; display: block"
        />
        <a-button
          type="primary"
          style="width: 80px; margin-left: 20px; display: block"
          @click="() => pubSearch(confirm, column.dataIndex, clearFilters)"
        >
          搜索
        </a-button>
      </div>
      <a-icon
        slot="searchIcon"
        slot-scope="filtered"
        type="search"
        :style="{ color: filtered ? '#108ee9' : undefined }"
      />
      <!-- 选择搜索 -->
      <div slot="selectDropdown" slot-scope="{ confirm, clearFilters, column }" class="searchWorkOreder">
        <a-select
          mode="multiple"
          :placeholder="checkPlaceholder(column.dataIndex)"
          style="width: 200px"
          v-model="tableFilterForm[column.dataIndex]"
        >
          <a-select-option v-for="item in statusList" :key="item.value" :value="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
        <a-button
          type="primary"
          style="width: 80px; margin-left: 20px; display: block"
          @click="() => pubSearch(confirm, column.dataIndex, clearFilters)"
        >
          搜索
        </a-button>
      </div>
      <a-icon
        slot="selectIcon"
        slot-scope="filtered"
        type="filter"
        :style="{ color: filtered ? '#108ee9' : undefined }"
      />
      <!-- 日期搜索 -->
      <div slot="datePicker" slot-scope="{ confirm, clearFilters, column }" class="searchWorkOreder">
        <a-range-picker
          style="width: 188px"
          v-model="tableFilterForm[column.dataIndex]"
          date-format="YYYY-MM-DD"
          @change="rangePickChang"
          :placeholder="['开始时间', '结束时间']"
        />
        <a-button
          type="primary"
          style="width: 80px; margin-left: 20px; display: block"
          @click="() => pubSearch(confirm, column.dataIndex, clearFilters)"
        >
          搜索
        </a-button>
      </div>
      <a-icon
        slot="dateIcon"
        slot-scope="filtered"
        type="search"
        :style="{ color: filtered ? '#108ee9' : undefined }"
      />
      <!-- 插槽显示 -->
      <span
        slot="taskName"
        @click="openDetail(record)"
        :title="record.taskName"
        slot-scope="text, record"
        style="color: #1890ff; cursor: pointer"
        >{{ text }}</span
      >
      <span slot="typeName" :title="record.typeName" slot-scope="text, record">{{ record.typeName }}</span>
      <span slot="planDate" :title="record.planDate" slot-scope="text, record">{{ record.planDate }}</span>
      <span slot="goodsTypeNumText" :title="record.goodsTypeNumText" slot-scope="text, record">{{
        record.goodsTypeNumText
      }}</span>
      <span slot="goodsNumText" :title="record.goodsNumText" slot-scope="text, record">{{ record.goodsNumText }}</span>
      <!-- 操作 -->
      <span slot="actions" slot-scope="text, record">
        <span class="pubColor" @click="goBatchOutForm(record)">批量出库</span>
        <a-divider type="vertical" />
        <a-dropdown>
          <a class="ant-dropdown-link" @click="(e) => e.preventDefault()">
            更多
            <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <div
                class="menuOutBox"
                @mouseenter="mouseenter()"
                @mouseleave="mouseLeave()"
                @click="signOutOver(record)"
              >
                <img src="~@/assets/img/ding.png" v-if="!mouseHover" class="boxLeft" alt="" />
                <img src="~@/assets/img/ding_active.png" v-else class="boxLeft" alt="" />
                <div class="boxRight">
                  <div class="rightTop" :style="{ color: mouseHover ? '#1890FF' : '' }">标记为出库完成</div>
                  <div class="rightBot">出库完成后无法对任务再次出库。</div>
                </div>
              </div>
            </a-menu-item>
            <a-menu-item> </a-menu-item>
          </a-menu>
        </a-dropdown>
      </span>
      <!-- 子表begin -->
      <a-table
        slot="expandedRowRender"
        slot-scope="text"
        :columns="innerColumns"
        :data-source="text.innerData || []"
        :pagination="false"
      >
        <div
          class="ant-table-row-cell-ellipsis"
          slot="goodsName"
          :title="`${text} | ${record.goodsSpec} | ${record.goodsCode}`"
          slot-scope="text, record"
        >
          {{ `${text} | ${record.goodsSpec} | ${record.goodsCode}` }}
        </div>
        <div
          class="ant-table-row-cell-ellipsis"
          slot="goodsNum"
          :title="`${text}${record.basicUnitText}`"
          slot-scope="text, record"
        >
          {{ `${text}${record.basicUnitText}` }}
        </div>
        <div
          class="ant-table-row-cell-ellipsis"
          slot="alreadyQualifiedNum"
          :title="`${text}${record.basicUnitText}`"
          slot-scope="text, record"
        >
          {{ `${text}${record.basicUnitText}` }}
        </div>
        <div
          class="ant-table-row-cell-ellipsis"
          slot="alreadyScrapNum"
          :title="`${text}${record.basicUnitText}`"
          slot-scope="text, record"
        >
          {{ `${text}${record.basicUnitText}` }}
        </div>
        <div
          class="ant-table-row-cell-ellipsis"
          slot="pendingNum"
          :title="`${text}${record.basicUnitText}`"
          slot-scope="text, record"
          :style="{ color: text == 0 ? '' : 'red' }"
        >
          {{ `${text}${record.basicUnitText}` }}
        </div>
      </a-table>
      <!-- 子表end -->
    </a-table>
    <div
      class="uni-card resetPadding"
      :style="{
        position: 'fixed',
        bottom: 0,
        right: 0,
        zIndex: 2,
        left: collapsed ? '79px' : '208px',
        background: '#fff',
        paddingLeft: '43px',
      }"
    >
      <div style="display: inline-block">
        <span>
          {{ `共${total} 条` }}
        </span>
      </div>
      <div style="display: inline-block; float: right">
        <a-pagination
          :total="total"
          v-model="current"
          :page-size-options="pageSizeOptions"
          :page-size="pageSize"
          @change="onChangePage"
          @showSizeChange="onShowSizeChange"
          show-quick-jumper
          show-size-changer
        />
      </div>
    </div>
    <SetColumn
      columnName="设置列"
      ref="SetColumn"
      v-if="showSetColumn"
      @sureBtn="sureBtn"
      @cancelBtn="showSetColumn = false"
    />
    <!-- 筛选抽屉 -->
    <a-drawer width="500" :closable="true" :visible="showFilter" @close="closeFilter">
      <div class="filter-body">
        <div slot="title" class="uni-card filter-tit">
          筛选 <span class="filter-num">{{ filteredNums }}</span>
        </div>
        <div class="uni-card" v-if="filteredNums > 0" style="background: #fff">
          <div v-for="(item, i) in filteredList" :key="i" v-show="checkShow(item.text)" class="tag-wrap">
            <span class="filter-tag" @click="delFiltered(item.key)">
              <span class="tag-text">{{ `${item.title}：${item.text}` }}</span>
              <a-icon type="close" style="float: right" />
            </span>
          </div>
        </div>
        <div style="overflow-y: scroll; flex: 1; padding: 0">
          <div class="uni-card" style="background: #fff">
            <a-form-model ref="ruleForm" layout="vertical" :model="filterForm">
              <a-form-model-item label="任务标题">
                <a-input v-model="filterForm.taskName" placeholder="请输入" />
              </a-form-model-item>
              <a-form-model-item label="类型">
                <a-select mode="multiple" placeholder="请选择" v-model="filterForm.statusListStr" allowClear>
                  <a-select-option v-for="item in statusList" :key="item.value" :value="item.value">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
              <a-form-model-item label="计划出库日期">
                <a-range-picker
                  date-format="YYYY-MM-DD"
                  :placeholder="['请选择', '请选择']"
                  v-model="filterForm.planStartTime"
                  style="width: 100%"
                  @change="startTimeChange"
                />
              </a-form-model-item>
            </a-form-model>
          </div>
        </div>
        <div class="footer-submit">
          <a-button class="margin-btn" @click="resetFilter">重置</a-button>
          <a-button type="primary" @click="handleFilter">确定</a-button>
        </div>
      </div>
    </a-drawer>
    <!-- 完成modal -->
    <a-modal
      :bodyStyle="{ padding: '32px 32px 24px', boxSizing: 'border-box' }"
      :maskClosable="false"
      v-model="overVisible"
      :closable="false"
      on-ok="setLimit"
      width="460px"
    >
      <template slot="footer">
        <a-button key="back" @click="overVisible = false"> 取消 </a-button>
        <a-button key="submit" @click="sureOver" type="primary"> 确定 </a-button>
      </template>
      <div class="modalTopBox">
        <a-icon type="question-circle" style="color: #faad14; font-size: 22px" />
        <span>出库完成后无法对任务再次出库。</span>
      </div>
      <div class="bigFont">确定出库完成吗？</div>
    </a-modal>

    <applyDeliverDetail ref="applyDeliverDetail"></applyDeliverDetail>
    <materialRequisitionDetail ref="materialRequisitionDetail"></materialRequisitionDetail>
    <addMaterialRequisitionDetail ref="addMaterialRequisitionDetail"></addMaterialRequisitionDetail>
    <batchOut ref="batchOut" @refresh="pubSearch(() => {})"></batchOut>
  </div>
</template>
<script>
import moment from 'moment'
import { outListApi, statusApi, outSignApi, getOutTaskGoodsByTaskId } from '@/api/erpApi'
import { columns, allColumn, innerColumns } from './outColumn.js'
import { getNewColumns, compareDate, subStrText } from '@/utils/util'
import SetColumn from '@/pubComponent/SetColumn.vue'
import { mapState } from 'vuex'
import tableDragResize from '@/mixins/tableDragResize'
const actionArr = [
  {
    fixed: 'right',
    title: '操作',
    align: 'left',
    dataIndex: 'actions',
    ellipsis: true,
    width: 160,
    scopedSlots: { customRender: 'actions' },
  },
]
export default {
  components: {
    SetColumn,
    applyDeliverDetail: (resolve) => require(['@/views/apply/applyDeliverDetail'], resolve),
    materialRequisitionDetail: (resolve) =>
      require(['@/views/workManagement/materialRequisition/materialRequisitionDetail'], resolve),
    addMaterialRequisitionDetail: (resolve) =>
      require(['@/views/workManagement/addMaterialRequisition/addMaterialRequisitionDetail'], resolve),
    batchOut: (resolve) => require(['@/views/warehouseManagement/stockTask/outStock/batchOut'], resolve),
  },
  props: ['activeTab'],
  mixins: [tableDragResize],
  data() {
    return {
      mouseHover: false,
      moment,
      subStrText,
      columns,
      tableData: [],
      overVisible: false,
      itemInfo: {},
      //全选按钮
      current: 1,
      total: 0,
      pageSize: 10,
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      showSetColumn: false,
      // 抽屉数据
      showFilter: false, // 筛选抽屉
      realFilterForm: {},
      tableFilterForm: {},
      filterForm: {
        taskName: '',
        statusListStr: [],
        planStartTime: [],
      },
      filteredFormLable: {
        taskName: '任务标题',
        statusListStr: '类型',
        planStartTime: '计划出库日期',
      },
      statusList: [],
      // 子表参数begin
      innerColumns,
      innerData: [],
      tableLoading: false,
      // 子表参数end
      tableKey: 1.9,
    }
  },
  computed: {
    ...mapState({
      collapsed: (state) => state.user.collapsed,
    }),
    computedX() {
      let xnum = 0
      for (let item of this.columns) {
        xnum += Number(item.width)
      }

      return xnum
    },
    realFilterNum() {
      let nums = 0
      for (let key in this.realFilterForm) {
        if (this.realFilterForm[key] != '' && this.realFilterForm[key].length > 0) {
          nums += 1
        }
      }
      return nums
    },
    filteredNums() {
      let nums = 0
      for (let key in this.filterForm) {
        if (this.filterForm[key] != '') {
          nums += 1
        }
      }
      return nums
    },
    filteredList() {
      let list = []
      for (let key in this.filterForm) {
        if (this.filteredFormLable[key] == '类型') {
          let strArr = ''
          for (let item of this.filterForm[key]) {
            for (let each of this.statusList) {
              if (item == each.value) {
                strArr += each.name + '，'
              }
            }
          }
          if (strArr) {
            strArr = strArr.substring(0, strArr.length - 1)
          }
          list.push({
            title: this.filteredFormLable[key],
            text: strArr,
            key,
          })
        } else {
          list.push({
            title: this.filteredFormLable[key],
            text: this.filterForm[key],
            key,
          })
        }
      }
      return list
    },
  },
  created() {
    let oldValue = localStorage.getItem(this.BUSI_CONST.Entity.WAITE_OUTSTOCK_LIST)
    this.columns = getNewColumns(allColumn, JSON.parse(oldValue), actionArr, this.columns)
    let obj = {
      pageNo: this.current,
      pageSize: this.pageSize,
    }
    this.getData(obj)
    this.getStatusList()
  },
  updated() {
    this.updateTableHeight()
  },
  methods: {
    updateTableHeight() {
      this.$nextTick(() => {
        let tds = document.querySelectorAll('.ant-table-expanded-row')
        if (tds.length > 0) {
          for (let j = 0; j < tds.length; j++) {
            const td = tds[j]
            td.children[0].innerHTML = ''
          }
        }
        let element = document.querySelectorAll('.components-table-demo-nested .ant-table-expanded-row')
        let len = element.length / 2
        for (let i = 0; i < len; i++) {
          element[i + len].style.height = element[i].offsetHeight + 'px'
        }
      })
    },
    async handleTableExpand(bl, v) {
      if (bl) {
        let current = null
        for (let i = 0; i < this.tableData.length; i++) {
          const item = this.tableData[i]
          if (item.id == v.id) {
            current = i
          }
        }
        console.log(bl, v)
        try {
          this.tableLoading = true
          const res = await getOutTaskGoodsByTaskId({ taskId: v.id, pageNo: 1, pageSize: 999 })
          this.tableData[current].innerData = res.result.records
          this.tableLoading = false
        } catch (e) {
          this.tableLoading = false
        }
      }
    },
    getStatusList() {
      let obj = {
        type: 'O',
      }
      statusApi(obj).then((res) => {
        if (res.success) {
          this.statusList = res.result
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    },
    goBatchOutForm(row) {
      let params = {
        type: row.type,
        id: row.id,
      }
      this.$refs.batchOut.initForm(params)
    },
    mouseenter() {
      this.mouseHover = true
    },
    mouseLeave() {
      this.mouseHover = false
    },
    openDetail(row) {
      // let detailUrl = ''
      // switch (row.type) {
      //   case 'O3': //发货详情
      //     detailUrl = '/apply/applyDeliverDetail'
      //     break
      //   case 'O4': //领料单详情
      //     detailUrl = '/workManagement/materialRequisitionDetail'
      //     break
      //   case 'O5': //补料单详情
      //     detailUrl = '/workManagement/addMaterialRequisitionDetail'
      //     break
      // }
      // let paramsObj = {
      //   activeTab: this.activeTab,
      // }
      // if (row.type == 'O3') {
      //   paramsObj.applyNo = row.sourceNumber
      // } else {
      //   paramsObj.id = row.sourceId
      // }

      let detailUrl = ''
      switch (row.type) {
        case 'O3': //发货详情
          detailUrl = 'applyDeliverDetail'
          break
        case 'O4': //领料单详情
          detailUrl = 'materialRequisitionDetail'
          break
        case 'O5': //补料单详情
          detailUrl = 'addMaterialRequisitionDetail'
          break
      }
      let paramsObj = null
      if (row.type == 'O3') {
        // paramsObj.applyNo = row.sourceNumber
        paramsObj = {
          applyNo: row.sourceNumber,
        }
      } else {
        paramsObj = row.sourceId
      }
      this.$refs[detailUrl].initDetail(paramsObj)
    },
    signOutOver(row) {
      this.itemInfo = row
      this.overVisible = true
    },
    sureOver() {
      let obj = {
        taskId: this.itemInfo.id,
      }
      outSignApi(obj).then((res) => {
        if (res.success) {
          this.$antdMessage.success('出库完成成功！')
          let params = this.formatData()
          let obj = {
            pageNo: this.current,
            pageSize: this.pageSize,
            ...params,
          }
          this.getData(obj)
        } else {
          this.$antdMessage.warning(res.message)
        }
        this.overVisible = false
      })
    },

    getData(obj) {
      outListApi(obj).then((res) => {
        if (res.success) {
          if (res.result.total) {
            this.total = res.result.total
          } else {
            this.total = 0
          }
          let copyArr = JSON.parse(JSON.stringify(res.result.records))
          for (let item of copyArr) {
            for (let each in item) {
              if (!item[each] && item[each] != 0) {
                item[each] = '-'
              }
            }
          }
          this.tableData = copyArr
          this.$emit('updateNum', 'out', this.total)
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    },

    /* 打开筛选 */
    handleShowFilter() {
      this.filterForm = JSON.parse(JSON.stringify(this.realFilterForm))
      this.showFilter = true
    },
    showColumn() {
      this.showSetColumn = true
      this.$nextTick(() => {
        this.$refs.SetColumn.paramsData(allColumn, this.BUSI_CONST.Entity.WAITE_OUTSTOCK_LIST, columns)
      })
    },
    sureBtn(emitArr) {
      this.columns = getNewColumns(allColumn, emitArr, actionArr)
      localStorage.setItem(this.BUSI_CONST.Entity.WAITE_OUTSTOCK_LIST, JSON.stringify(emitArr))
      this.tableKey += 1
      console.log('返回的数据是：', this.columns)
    },
    checkPlaceholder(dataIndex) {
      let str = ''
      switch (dataIndex) {
        case 'taskName':
          str = '请输入任务标题'
          break
        case 'statusListStr':
          str = '请选择类型'
          break
      }
      return str
    },
    pubSearch(confirm, dataIndex, clearFilters) {
      confirm() //用来关闭搜索弹窗
      // clearFilters() //用来重置搜索内容
      this.filterForm = JSON.parse(JSON.stringify(this.tableFilterForm))
      this.realFilterForm = JSON.parse(JSON.stringify(this.tableFilterForm))
      let params = this.formatData()
      let obj = {
        pageNo: this.current,
        pageSize: this.pageSize,
        ...params,
      }
      this.getData(obj)
    },

    // 分页
    onChangePage(current, pageSize) {
      this.current = current
      let params = this.formatData()
      let obj = {
        pageNo: this.current,
        pageSize: this.pageSize,
        ...params,
      }
      this.getData(obj)
    },
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize
      this.current = 1
      let params = this.formatData()
      let obj = {
        pageNo: this.current,
        pageSize: this.pageSize,
        ...params,
      }

      this.getData(obj)
    },
    rangePickChang(a, b) {
      let planStartTime = null
      if (!b[0] && !b[1]) {
        planStartTime = []
      } else {
        planStartTime = b
      }
      this.$set(this.tableFilterForm, 'planStartTime', planStartTime)
    },
    // 抽屉方法

    startTimeChange(a, b) {
      let planStartTime = null
      if (!b[0] && !b[1]) {
        planStartTime = []
      } else {
        planStartTime = b
      }
      this.$set(this.filterForm, 'planStartTime', planStartTime)
    },

    /* 确定筛选 */
    handleFilter() {
      console.log('当前选择的是：', this.filterForm)
      let params = this.formatData()
      this.current = 1
      let obj = {
        pageNo: this.current,
        pageSize: this.pageSize,
        ...params,
      }
      this.getData(obj)
      this.realFilterForm = JSON.parse(JSON.stringify(this.filterForm))
      this.tableFilterForm = JSON.parse(JSON.stringify(this.filterForm))
      this.showFilter = false
    },
    // 筛选传参数据
    formatData() {
      let copyForm = JSON.parse(JSON.stringify(this.filterForm))
      let params = {}
      if (copyForm.statusListStr && copyForm.statusListStr.length > 0) {
        params.type = copyForm.statusListStr.join(',')
      } else {
        params.type = ''
      }
      params.taskName = copyForm.taskName
      if (copyForm.planStartTime && copyForm.planStartTime.length > 0) {
        params.startDate = copyForm.planStartTime[0]
        params.endDate = copyForm.planStartTime[1]
      } else {
        params.startDate = ''
        params.endDate = ''
      }
      return params
    },
    /* 删除已选 */
    delFiltered(key) {
      if (this.filteredFormLable[key] == '类型') {
        this.filterForm[key] = []
      } else if (this.filteredFormLable[key] == '计划出库日期') {
        this.filterForm[key] = []
      } else {
        this.filterForm[key] = ''
      }
    },
    /* 重置筛选 */
    resetFilter() {
      this.filterForm = {
        taskName: '',
        statusListStr: [],
        planStartTime: [],
      }
    },
    /* 关闭筛选 */
    closeFilter() {
      this.showFilter = false
    },
    checkShow(item) {
      let currentBoolean = Array.isArray(item)
      if (currentBoolean) {
        if (item.length == 0) {
          return false
        } else {
          return true
        }
      } else {
        if (item) {
          return true
        } else {
          return false
        }
      }
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.table-operations {
  margin-bottom: 16px;
}

.table-operations > button {
  margin-right: 8px;
}
.topBox {
  .flex(flex-start, center);
  margin-bottom: 16px;
}
.searchWorkOreder {
  .flex(flex-start, center);
  padding: 8px;
}
.pubColor {
  font-size: 14px;
  color: #1890ff;
  cursor: pointer;
}

.filter-tit {
  background: #fff;
  border-bottom: 1px solid @greyBorder;
  font-size: @fontSize4;
}
.filter-num {
  color: @normalFont;
}
.filter-body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.margin-btn {
  margin-right: @distance5;
}
.filter-tag {
  display: inline-block;
  position: relative;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: @fontSize1;
  line-height: @fontSize1;
  max-width: 100%;
  background: @greyBg;
  color: @titFont;
  cursor: pointer;
  .tag-text {
    display: inline-block;
    padding-right: 20px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .anticon-close {
    position: absolute;
    right: 8px;
    top: 8px;
  }
}
.tag-wrap:nth-of-type(n + 2) {
  margin-top: 10px;
}

.modalTopBox {
  .flex(flex-start, center);
  margin-bottom: 8px;
  span {
    margin-left: 16px;
    display: block;
    overflow: hidden;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
    color: rgba(0, 0, 0, 1);
  }
}

.bigFont {
  font-size: 16px;
  color: rgba(0, 0, 0, 1);
  box-sizing: border-box;
  padding-left: 39px;
  margin-bottom: 8px;
  font-weight: 500;
}
div.menuOutBox {
  .flex(space-between, flex-start);
  box-sizing: border-box;
  padding: 18px;
  border-radius: 4px;
  background-color: #fff;
  img.boxLeft {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    position: relative;
    top: 2px;
  }

  div.boxRight {
    div.rightTop {
      color: #001915;
      font-size: 14px !important;
    }

    div.rightBot {
      font-size: 12px;
      color: #888888;
    }
  }
}
</style>
